<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			input {
				display: block;
			}
		</style>
	</head>

	<body>
		<input type="text" id="title" />
		<input type="text" id="content" />
		<input type="text" id="target_time" />
		<button type="button" id="add_plan">add</button>
		<button type="button" id="select">select</button>
		<script type="text/javascript">
			//			(function() {
			document.getElementById("add_plan").addEventListener('click', function() {
				var title = document.getElementById("title").value;
				var content = document.getElementById("content").value;
				var targetTime = document.getElementById("target_time").value;
				var createTime = new Date().getTime();

				var values = [title, content, targetTime, createTime];
				addPlan(values);
			});
			document.getElementById("select").addEventListener('click', function() {
				getPlanList();
			});
			// 判定当前环境是否支持websql
			//				if(!window.openDatabase) {
			//					console.log('当前环境不支持websql');
			//					return;
			//				}

			var config = { //初始化websql数据库的参数信息
				name: 'my_plan',
				version: '',
				desc: 'manage my plans',
				size: 20 * 1024
			};
			var db = window.openDatabase(config.name, config.version, config.desc, config.size);

			crateTable(db);

			function errorCallback(error) {
				console.error('error:' + error.message);
			}

			function crateTable() {
				var sql = 'create table if not exists t_plan(title, content, target_time, create_time)';
				db.transaction(function(tx) {
					tx.executeSql(sql, null, function(tx, rs) {
						console.log('执行sql成功');
					}, errorCallback);
				});
			}

			function addPlan(values) {
				var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)';
				db.transaction(function(tx) {
					tx.executeSql(sql, values, function(tx, rs) {
						var effectRow = rs.rowsAffected;
						console.log('影响记录条数:' + effectRow);
						effectRow && console.log('执行sql成功');
					}, errorCallback);
				});
			}

			function getPlanList() {
				var sql = 'SELECT * FROM t_plan';
				db.transaction(function(tx) {
					tx.executeSql(sql, null, function(tx, rs) {
						console.log('list:' + rs.rows);
						console.log('item:' + JSON.stringify(rs.rows.item(0)));
					}, errorCallback);
				});
			};

			function deletePlan(values) {
				var sql = 'DELETE FROM t_plan WHERE title = ?';
				db.transaction(function(tx) {
					tx.executeSql(sql, values, function(tx, rs) {
						var effectRow = rs.rowsAffected;
						console.log('影响记录条数:' + effectRow);
						effectRow && console.log('执行sql成功');
					}, errorCallback);
				});
			}

			function updatePlan(values) {
				var sql = 'UPDATE t_plan SET content = ? WHERE title = ?';
				db.transaction(function(tx) {
					tx.executeSql(sql, values, function(tx, rs) {
						var effectRow = rs.rowsAffected;
						console.log('影响记录条数:' + effectRow);
						effectRow && console.log('执行sql成功');
					}, errorCallback);
				});
			}
			//			}());
		</script>
	</body>

</html>